<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<script src="../../resources/common/jquery/jquery-1.7.min.js"></script>
<script src="../../resources/pangdahai/js/xmpp/jquery.xmpp.js"></script>
<body>
This example just connect notify when connected and show the connected contacts.
<br>
Jid <input type="text" id="jid"> (ej: maxpowel@gmail.com, alvaro.maxpowel@chat.facebook.com)
<br>
Password <input type="password" id="pass">
<br>
<button id="connectBut">Connect</button>
<button id="disconnectBut">Disconnect</button>
<button id="rosterBut">Get roster</button>
<button id="loginOpenFire">loginOpenFire</button>
<button id="loginMyTest">loginMyTest</button>
<button id="sendMsg">send message</button>
<br>

<div id="log">
</div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        $("#rosterBut").click(function () {
            if ($.xmpp.isConnected()) {
                $.xmpp.getRoster(function (roster) {
                    console.log(roster);
                });
            } else {
                alert("You are not connected");
            }
        });
        $('#loginOpenFire').click(function(){
            $.xmpp.connect({url:"http://localhost:5222", jid:"admin@g06000020.com", password:"gsj020"});
        });

        $('#loginMyTest').click(function(){
            $.xmpp.connect({url:"http://localhost:8089", jid:"admin@g06000020.com", password:"gsj020"});
        });

        $('#sendMsg').click(function(){
            var options = {
                body: "Hey dude!",
                to: "user_one@g06000020.com",
                resource: "Chat"
//                otherAttr: "value"
            }
            $.xmpp.sendMessage({options:options});
        });


        $("#connectBut").click(function () {
            var jid = $("#jid").val();
            var password = $("#pass").val();
            var logContainer = $("#log");

//An example of bosh server url. This site is working but it can change or go down.
//If you are going to have a production site, you must install your own BOSH server
//        var url ="http://bosh.metajack.im:5280/xmpp-httpbind";
//            var url = "http://g06000020:5222";
            var url = "http://localhost:5222";
            $.xmpp.connect({url:url, jid:jid, password:password,
                onConnect:function () {
                    logContainer.append("<div>Connected</div>");
                    $.xmpp.setPresence(null, function () {
                        logContainer.append("<div>Presence changed to online</div>");
                    });
                },
                onPresence:function (presence) {
                    logContainer.append("<div>New presence: " + presence.from + "</div>");
                },
                onDisconnect:function () {
                    logContainer.append("<div>Disconnected...</div>");
                },
                onError:function (error) {
                    logContainer.append("<div>Error: " + error.error + "</div>");
                }
            });
        });

        $("#disconnectBut").click(function () {
            $.xmpp.disconnect();
        });

    });
</script>